<template>
  <div class="d-flex flex-column gap-col-16 mb-8">
    <InputWrap
      v-model="form.account.value"
      :err-msg="form.account.error"
      :label="$t('label.account')"
      :placeholder="$t('placeholder.account')"
      :append-icon="accountAppendIcon"
      :disabled="disabled"
      @blur="checkAccount"
    ></InputWrap>
    <InputWrap
      v-model="form.email.value"
      :err-msg="form.email.error"
      :label="$t('label.email')"
      :placeholder="$t('placeholder.email')"
      :append-icon="emailAppendIcon"
      :disabled="disabled"
      @blur="checkEmail"
    ></InputWrap>
    <InputWrap
      v-model="form.password.value"
      :label="$t('label.password')"
      :placeholder="$t('placeholder.password')"
      :err-msg="form.password.error"
      :disabled="disabled"
      password
    ></InputWrap>
  </div>
  <BlockButton
    :label="$t('common.completeRegister')"
    :disabled="disabled"
    :is-gradient="false"
    @click="onConfirm()"
  ></BlockButton>
  <div v-if="signUpErrMsg" class="text-start font-size-14 font-weight-400 line-height-120 text-primary-x">
    {{ signUpErrMsg }}
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { onKeyStroke } from '@vueuse/core'
import BlockButton from '@/components/button/BlockButton.vue'
import InputWrap from '@/components/form/InputWrap.vue'
import { useSignUp } from '@/compositions/auth/signUp'

const props = defineProps({
  aff: {
    type: String,
    required: false,
  },
  ch: {
    type: String,
    required: false,
  },
})

const router = useRouter()
const onSignUp = computed(() =>
  props.aff
    ? () => router.replace({ name: 'thank-you', query: { aff: props.aff, ch: props.ch } })
    : () => router.replace({ name: 'thank-you' }),
)
const { form, accountAppendIcon, emailAppendIcon, disabled, signUpErrMsg, checkAccount, checkEmail, onConfirm } =
  useSignUp(onSignUp.value, props.ch)

onKeyStroke('Enter', onConfirm)
</script>
